<template>
  <view class="uni-container">
    <!-- 表格容器 -->
    <scroll-view scroll-x="true" class="table-wrapper">
      <!-- 表头 -->
      <view class="table-header" v-if="tableData.salesDataList">
        <text class="header-cell fixed-column">店铺</text>
        <text class="header-cell">OPPO手机</text>
        <text class="header-cell">平板手表</text>
        <text class="header-cell">其他手机</text>
        <text class="header-cell">合计数量</text>
        <text class="header-cell">合计金额</text>
        <text class="header-cell">单机均价</text>
        <text class="header-cell">手机金额</text>
        <text class="header-cell">iot金额</text>
        <text class="header-cell">其他手机金额</text>
      </view>

      <!-- 数据行 -->
      <view
          v-for="(item, index) in tableData.salesDataList"
          :key="index"
          class="table-row"
          :style="{backgroundColor: index % 2 === 0 ? '#fff' : '#f8f8f8'}">
        <text class="body-cell fixed-column">{{ item.shop_name }}</text>
        <text class="body-cell number">{{ item.oppo }}</text>
        <text class="body-cell number">{{ item.tablet }}</text>
        <text class="body-cell number">{{ item.other }}</text>
        <text class="body-cell number">{{ item.total_quantity }}</text>
        <text class="body-cell number">{{ item.total_price }}</text>
        <text class="body-cell number">{{ item.unit_price }}</text>
        <text class="body-cell number">{{ item.oppo }}</text>
        <text class="body-cell number">{{ item.tablet }}</text>
        <text class="body-cell number">{{ item.other }}</text>
      </view>

      <!-- 底部统计 -->
      <view class="table-footer" v-if="tableData.salesTotal">
        <view class="body-cell summary-box  fixed-column">
          <text class="summary-item">实销金额：{{ tableData.salesTotal.actual_sales || 0 }}</text>
          <text class="summary-item">销售成本：{{ tableData.salesTotal.cost || 0 }}</text>
          <text class="summary-item">销售毛利：{{ tableData.salesTotal.sale_gross_margin ||0 }}</text>
          <text class="summary-item">赠品成本：{{ tableData.salesTotal.giveaway_cost || 0}}</text>
          <text class="summary-item">毛利率：{{ (tableData.salesTotal.gross_margin || 0) + "%" }}</text>
        </view>
        <!-- 其他列占位 -->
        <view class="footer-cell" v-for="i in 8" :key="i"></view>
      </view>
      <uni-load-more v-if="!tableData.salesDataList" :status="'noMore'"/>
    </scroll-view>

    <!--筛选弹出层-->
    <uni-popup ref="filterPopup" type="center" :mask-click="true">
      <view class="centered-popup">
        <view class="clear-container">
          <text class="label required" @click="handleClear">清空</text>
        </view>
        <!-- 时间选择区域 -->
        <view class="time-range">
          <!-- 时间段选择器 -->
          <uni-datetime-picker v-model="timeRange" type="daterange"/>
        </view>
        <view class="time-range">
          <text class="label required">选择门店</text>
          <view class="input-container">
            <picker class="form-picker" :value="shopDataIndex" :range="shopData" @click="showShop"
                    @change="onColumnChange">
              <view class="picker-content">
                <text class="value-text">{{ shopData[shopDataIndex] || '请选择门店' }}</text>
                <uni-icons type="arrowright" size="18" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
        </view>
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="cancel-btn" @click="closePopup">取消</button>
          <button class="confirm-btn" @click="confirmFilter">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import ADataPicker from "../components/a-data-picker.vue";
import UniPopup from "../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniDatetimePicker
  from "../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import UniIcons from "../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {getAction} from "../utils/action";
import UniNavBar from "../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
import UniLoadMore from "../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";

export default {
  name: "table",
  components: {
    UniLoadMore,
    UniNavBar,
    UniIcons, UniDatetimePicker, UniPopup, ADataPicker,
  },
  data() {
    return {
      shopDataIndex: 0,
      shopData: ["请选择"],
      timeRange: [], // 存储时间段[开始日期,结束日期]
      tableData: {},
      url: {
        list: "api/boss/salesDataList",
        shopList: "shop/noPageList",
      },
    }
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    //打开弹出层
    openFilterPopup() {
      this.$refs.filterPopup.open()
    },
    //关闭弹出层
    closePopup() {
      this.$refs.filterPopup.close()
    },
    showShop() {
      getAction(this.url.shopList).then(res => {
        if (res.success) {
          const temp = res.result.map(item => (item.shopName))
          this.shopData = ["请选择", ...temp]
        }
      })
    },
    //清空筛选
    handleClear() {
      this.shopDataIndex = 0;
      this.classifyRange = [];
      this.timeRange = []
      this.$refs.filterPopup.close();
    },
    /**
     * 确定筛选
     */
    confirmFilter() {
      if (this.timeRange.length == 2) {
        const [startDate, endDate] = this.timeRange;
        if (new Date(startDate) > new Date(endDate)) {
          uni.showToast({title: '结束时间不能早于开始时间', icon: 'none'});
          return;
        }

      }
      if (this.shopDataIndex > 0) {
        // this.$refs.listRef.queryParam.ShopName = this.shopData[this.shopDataIndex]
      }
      this.$refs.filterPopup.close();
    }
  },
  async onLoad() {
    let res = await getAction(this.url.list)
    if (res.success) {
      this.tableData = res.result
    }
  }
}
</script>


<style scoped lang="scss">
.uni-container {
  height: 100vh;
  background-color: #fff;
}

.table-wrapper {
  padding: 30rpx;
}

/* 表格通用样式 */
.table-header,
.table-row,
.table-footer {
  display: flex;
  min-width: 2100rpx;
  border-bottom: 1rpx solid #eee;
}

/* 表头样式 */
.table-header {
  background-color: #f5f5f5;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 固定列样式 */
.fixed-column {
  width: 200rpx;
  min-width: 200rpx;
  position: sticky;
  left: 0;
  background-color: inherit;
  z-index: 2;
}

/* 单元格基础样式 */
.header-cell,
.body-cell,
.footer-cell {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  min-width: 150rpx;
  font-size: 24rpx;
  color: #333;
}

/* 数字列样式 */
.number {
  text-align: center;
  color: #f4353c;
}

/* 底部统计 */
.table-footer {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 3;
  background-color: #fff3f3;
  margin-top: 0;
  box-shadow: 0 -2rpx 6rpx rgba(0,0,0,0.05);

  .summary-box {
    width: 200rpx;
    min-width: 200rpx;
    padding: 20rpx;
    background-color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .footer-cell:not(.fixed-column) {
    visibility: hidden;  // 隐藏其他列
  }
}

/* 调整层级关系 */
.fixed-column {
  z-index: 4;  // 提高层级
}

/* 适配滚动容器 */
.table-wrapper {
  position: relative;
  padding-bottom: 120rpx;  // 给底部留出空间
}
</style>